<template>
    <div class="chart" id="twoChart">
    </div>
</template>

<script>
    import { inject, onMounted, reactive } from "vue";
    export default {
        setup() {
      // 引入echarts
      let $echarts = inject("echarts");
      let $http = inject("axios");
      // 数据接收
      let oneData = reactive({});
      let xData = reactive([]);
      let yData = reactive([]);
      function setData() {
        xData = oneData.data.chartData.chartData.map((v) => v.title)
        yData = oneData.data.chartData.chartData.map((v) => v.num);
        console.log(xData);
        console.log(yData);
      }
      async function getState() {
        oneData = await $http({ url: "/one/data" });
      }
      onMounted(() => {
        // 初始化echarts
        let myChart = $echarts.init(document.getElementById("twoChart"));
        getState().then(() => {
          setData();
          myChart.setOption({
            xAxis: {
                type: 'category',
                data: xData,
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: yData,
                type: 'line'
                }
            ]
          });
          myChart.on("click", params => {
            console.log(params.name)
            console.log(params.value)
            })
        });
      });
      return {
        getState,
        oneData,
        xData,
        yData,
        setData,
      };
    },
  };
</script>

<style lang="css" scoped>
.chart {
height: 400px;
}
</style>